<template>
	<view class="content page">
		<view class="duild_con">

			<view class="temperature">
				<view class="">
					申请人
				</view>
				<u-input v-model="form.userName" height="40rpx" input-align="right"
					placeholder-style="fontSize:28rpx;color: #999999;" placeholder="请输入申请人" />
			</view>

			<view class="duild_list" @click.stop="showSelectWarehouseFn()" style="margin-top: 20upx;">
				<view class="duild_intro">
					<view class="intro">
						<text>入库仓库</text>
						<text></text>
					</view>
				</view>
				<view class="gt">
					<text>{{areasName}}</text>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
			</view>

			<view class="duild_list" @click.stop="showUseSelect=true" style="margin: 20upx 0;">
				<view class="duild_intro">
					<view class="intro">
						<text>用途</text>
						<text></text>
					</view>
				</view>
				<view class="gt">
					<text>{{form.use1}}</text>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
			</view>

			<view class="duild_list" @click.stop="showParkSelect=true" style="margin: 20upx 0;">
				<view class="duild_intro">
					<view class="intro">
						<text>园区</text>
						<text></text>
					</view>
				</view>
				<view class="gt">
					<text>{{form.usePark}}</text>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
			</view>

      <view class="duild_list" @click.stop="showCalendar=true" style="margin: 20upx 0;">
        <view class="duild_intro">
          <view class="intro">
            <text>入库日期</text>
            <text></text>
          </view>
        </view>
        <view class="gt">
          <text>{{form.operateTime}}</text>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>

      <view class="duild_list" style="margin: 20upx 0;">
        <view class="duild_intro">
          <view class="intro">
            <text>是否出库</text>
            <text></text>
          </view>
        </view>
        <view class="gt" style="display: flex;align-items: center;position: relative">
          <text style="z-index: 2;height: 100%;position: absolute;top: 0;left: 20rpx;display: flex;align-items: center;color: #fff" :style="form.isOut?'':'left:auto;right:14rpx;color:#333'">{{form.isOut?'是':'否'}}</text>
          <u-switch active-color="#44D94B"  size="54" v-model="form.isOut"></u-switch>
        </view>
      </view>

			<view class="supplies" v-for="(item,index) in materialList" :key="index">
				<view class="sup_title sup_item">
					<text>入库物资</text>
					<text @click="deleteMater(index)">删除</text>
				</view>
				<view class="sup_info">
					<view class="select_sup sup_item" @click="selectMaterial(index)">
						<text>请选择物资</text>
						<view class="">
							<text>{{item.materialName}}</text>
							<u-icon name="arrow-right" size="24" color="#999"></u-icon>
						</view>
					</view>
					<view class="select_num sup_item">
						<text>物资单价</text>
						<view class="">
							<view style="width:140rpx;">
								<u-input :border="true" @input="$forceUpdate()" :clearable="false"
									v-model.number="item.unitPrice" type="number" height="40rpx" input-align="right"
									placeholder-style="fontSize:28rpx;color: #999999;" placeholder="0" />
							</view>
							<text>元</text>
						</view>
					</view>
					<view class="select_num sup_item" style="margin-top: 20rpx;">
						<text>入库数量</text>
						<view class="">
							<view style="width:140rpx;">
								<u-input @input="$forceUpdate()" :border="true" :clearable="false"
									v-model.number="item.quantity" type="number" :max="item.maxQuantity" height="40rpx"
									input-align="right" placeholder-style="fontSize:28rpx;color: #999999;"
									placeholder="0" />
							</view>
							<text>{{item.unit}}</text>
						</view>
					</view>
					<view class="select_num sup_item" style="margin-top: 20rpx;">
						<text>入库总金额</text>
						<view class="">
							<text style="width:120rpx;text-align: right;">
								<text>{{item.unitPrice*item.quantity? (item.unitPrice*item.quantity).toFixed(2):0}}</text>
							</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mater_add" @click="addMaterial()">
				<image src="@/static/img/add_icon.png" mode=""></image>
				<text>添加物资</text>
			</view>
			<view class="lhwh_con">
				<view class="">
					备注
				</view>
				<textarea auto-height v-model="remark" maxlength="200" placeholder="请输入最多200个字符…"></textarea>
			</view>
			<view class="lhwh_sub" @click="submit">
				提交
			</view>
		</view>
		<u-select value-name="id" cancel-color="#999999" confirm-color="#44D94B" label-name="warehouse"
			v-model="showHouseSelect" :list="list" @confirm="houseConfirm"></u-select>

    <u-select value-name="id" cancel-color="#999999" confirm-color="#44D94B" label-name="parkName"
              v-model="showParkSelect" :list="parkList" @confirm="parkConfirm"></u-select>

    <u-select value-name="dictLabel" cancel-color="#999999" confirm-color="#44D94B" label-name="dictLabel"
              v-model="showUseSelect" :list="useTypeList" @confirm="useTypeConfirm"></u-select>

    <u-calendar v-model="showCalendar" mode="date" @change="dateSelectFn"></u-calendar>

		<u-popup mode="bottom" v-model="showMalSelect" z-index="102">
			<view style="height: 80vh;">
				<materList @select="malListSlectFn" :warehouse="{name:areasName,houseId}"></materList>
			</view>
		</u-popup>
    <u-toast ref="uToast" :icon="false"/>
	</view>
</template>

<script>
	import materList from "@/pagesMaterials/aidStorage/materList";
	export default {
		components: {
			materList
		},
		data() {
			return {
				list: [],
				showMalSelect: false,
				showParkSelect:false,
				showUseSelect:false,
				supValue: 0,
				materInfo: {},
				houseId: '',
				areasName: '',
        showCalendar:false,
				remark: '',
				showHouseSelect: false,
				// 物资列表
				materialList: [],
        parkList:[],
        useTypeList:[],
				// store存储列表
				userName: '',
				deptName: '',
				malIndex: '',
				form: {
					"recordType": "0",
					"userId": "",
					"category": "",
					"warehouseId": "",
					"operateTime": this.$u.timeFormat(Date.now()) ,
					"remark": "",
					"isOut": false,
					"userName": "",
					"use1": "",
					"usePark": "",
					"maMaterialList": []
					}
				};
			},
			watch: {
					materialList: {
						deep: true,
						handler() {
							console.log("change");
							this.$forceUpdate()
						}
					}
				},
				onLoad(option) {
					this.getList()
				},
				methods: {
					malListSlectFn(item) {
						for (let mal of this.materialList) {
							if (mal.id == item.id) {
								this.showToast(`${item.materialName}已经选过了!`)
								return
								break
							}
						}
						this.materialList[this.malIndex] = this.$u.deepClone(item)
						this.showMalSelect = false
					},
					selectMaterial(index) {
						this.malIndex = index
						this.showMalSelect = true
						// uni.navigateTo({
						// 	url: './materType?index=' + index+"&houseId="+this.houseId
						// })
					},
          //获取=本页所有数据
					getList() {
            this.getParkList()
            this.getMaWarehouseList()
            this.getUseTypeList()
					},
          //获取园区数据
          getParkList(){
            this.apis.commonApi.getParkList().then(res => {
              this.$forceUpdate(
                  this.parkList = res.rows
              )
            }).catch(() => {})
          },
          //获取楼栋
          getMaWarehouseList(){
            this.apis.materialsApi.maWarehouseList().then(res => {
              this.$forceUpdate(
                  this.list = res.rows
              )
            }).catch(() => {})
          },
          //获取维修用途类型
          getUseTypeList(){
            this.apis.commonApi.getDict('out_use_type').then(res => {
              this.useTypeList=res.data
            }).catch(() => {})
          },
					getTitle(title) {
						uni.setNavigationBarTitle({
							title: title
						});
					},
					showSelectWarehouseFn(i) {
            this.getMaWarehouseList()
						this.showHouseSelect = true
					},
					houseConfirm(e) {
						let res=e[0]
						this.houseId = res.value
						this.form.warehouseId=res.value
						this.areasName = res.label
					},
          parkConfirm(e){
            let res=e[0]
            this.form.usePark=res.label
          },
          useTypeConfirm(e){
            let res=e[0]
            this.form.use1=res.label
          },
          dateSelectFn(e){
            console.log(e)
            this.form.operateTime=e.result
          },
					valChange(e) {
						console.log('当前值为: ' + e.value)
					},
					deleteMater(index) {
						this.materialList.splice(index, 1)
					},
					addMaterial() {
						if (this.houseId === '') {
							this.showToast("请选择入库厂库！")
						} else {
							this.materialList.push({
								"materialName": "",
								"quantity": 0,
								'unitPrice': 0,
								"unit": "米",
								'id': ''
							})
							this.$forceUpdate()
						}
					},
					submit() {
            let hh={
              "recordType": "0",
              "userId": "",
              "category": "",
              "warehouseId": "1493058031049506816",
              "operateTime": "2022-02-27T03:16:35.394Z",
              "remark": "",
              "isOut": "0",
              "userName": "yy",
              "use1": "维修",
              "usePark": "西部食谷A区",
              "maMaterialList": []
            }
            let rules = [
              {name: 'userName',type: 'required', errmsg: '请输入申请人'},
              {name: 'warehouseId',type: 'required', errmsg: '请选择仓库'},
              {name: 'usePark',type: 'required', errmsg: '请选择园区'},
              {name: 'use1',type: 'required', errmsg: '请选择用途'}
            ]
            let valLoginRes = this.$validate.validate(this.form, rules)
            console.log(valLoginRes)
            if (valLoginRes.isOk){
              this.form.isOut=this.form.isOut?'1':'0'
              this.form.maMaterialList=this.materialList
              console.log(this.form.maMaterialList)
              if (this.form.maMaterialList.length<1){
                this.msgError("请选择物资")
                return
              }

              for (let item of this.materialList){
                if (item.quantity<=0||item.quantity==''||item.id==''){
                  this.msgError("有物资数量为0,或有未选择物资的条目，请检查或删除")
                  return
                }
              }

              this.apis.materialsApi.addMaInOutRecord(this.form).then(res=>{
                console.log(res)
                if (res.code==200){
                  this.form={
                    "recordType": "0",
                    "userId": "",
                    "category": "",
                    "warehouseId": "",
                    "operateTime": this.$u.timeFormat(Date.now()) ,
                    "remark": "",
                    "isOut": false,
                    "userName": "",
                    "use1": "",
                    "usePark": "",
                    "maMaterialList": []
                  }
                  this.materialList=[]
                  this.msgSuccess(res.msg)
                }
              })

            }else {
              this.msgError(valLoginRes.errmsg)
            }
					}
				}
		}
</script>

<style lang="scss" scoped>
	page {
		padding: 0;
	}

	@mixin title {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.content {
		/dee/ .u-tab-item {
			// color: #ffffff !important;
		}

		.duild_con {
			overflow-y: auto;
			height: 1160rpx;
		}

		.duild_list {
			padding: 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 12rpx;

			.duild_intro {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #333333;
				font-size: 26rpx;

				.intro {
					display: flex;
					font-size: 30rpx;
					justify-content: space-between;
					font-weight: 500;
				}
			}

			.gt {
				color: #999999;
				font-size: 26rpx;

				text:nth-child(1) {
					font-size: 28rpx;
					color: #333333;
					margin-right: 10rpx;
				}
			}
		}

		.temperature {
			padding: 30rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;

			view:nth-child(1) {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.record {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.record_con {
				font-size: 30rpx;
				font-weight: 500;

				text:nth-child(1) {
					color: #333333;
				}

				text:nth-child(2) {
					color: #999999;
				}
			}

			.record_pass {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				view {
					padding: 0;
					font-size: 28rpx;
					color: #666666;
					width: 146rpx;
					height: 70rpx;
					border-radius: 4rpx;
					line-height: 70rpx;
					text-align: center;
					background: rgba($color: #DDDDDD, $alpha: 0.35);
				}

				view:nth-child(1) {
					// margin-right: 20rpx;
				}

				.pass_select {
					box-sizing: border-box;
					color: #44D94B;
					background: rgba(68, 217, 75, 0.1);
					border: 1rpx solid #44D94B !important;
				}
			}
		}

		.temperature {
			padding: 30rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 12rpx;

			view:nth-child(1) {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
		}


		.lhwh_con {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;
			align-items: flex-start;
			border-radius: 12rpx;

			view {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			/deep/ .uni-textarea-wrapper {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			/deep/ .uni-textarea-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}

			textarea {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				min-height: 200rpx;
			}
		}

		.lhwh_sub {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 28rpx 0;
			background: #44D94B;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			@include flexCenter;
			z-index: 99;
		}

		.supplies {
			.sup_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.sup_title {
				padding: 30rpx 30rpx 20rpx 30rpx;

				text:last-child {
					font-size: 26rpx;
					font-weight: 500;
					color: #F74D39;
				}
			}

			.sup_title,
			.select_sup,
			.select_num {
				text:nth-child(1) {
					@include title
				}
			}

			.sup_info {
				background: #FFFFFF;
				padding: 30rpx 30rpx 0 30rpx;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;

				.select_sup {
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;

					view {
						display: flex;
						align-items: center;

						text:nth-child(1) {
							color: #333333;
							margin-right: 12rpx;
						}

						text:nth-child(2) {
							color: #999999;
							font-size: 38rpx;
						}
					}
				}

				.select_num {
					padding-bottom: 30rpx;

					// /deep/ .u-icon-plus{
					// 	background: #E5E5E5 !important;
					// }
					view {
						display: flex;
						align-items: center;

						view:nth-child(1) {
							color: #333333;
							margin-right: 12rpx;
						}

						text:nth-child(1) {
							color: #333333;
							margin-right: 12rpx;
						}

						text:nth-child(2) {
							color: #999999;
							font-size: 28rpx;
						}
					}
				}

				.sup_item {
					border-bottom: 1rpx solid #EEEEEE;
				}
			}
		}

		.mater_add {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 30rpx;
			background: #FFFFFF;
			border-bottom-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 26rpx;
				font-weight: 500;
				color: #44D94B;
			}
		}
	}
</style>
